<template>
  <div class="search-user-container" v-if="callStatus !== 'connected'">
    <div
      class="video-call-section-header"
      style="margin-bottom: 20px; margin-top: 20px"
    >
      客服中心
    </div>
    <div style="width: 500px">
      <el-select v-model="value" filterable placeholder="请选择呼叫人">
        <el-option
          v-for="(item, index) in data"
          :key="index"
          :label="item"
          :value="item"
        >
        </el-option>
      </el-select>

      <el-radio v-model="radio" label="1">语音通话</el-radio>
      <el-radio v-model="radio" label="2">视频通话</el-radio>
    </div>

    <div v-show="callStatus !== 'connected'" class="search-user-list">
      <div
        v-if="callStatus === 'calling' && isInviter"
        class="calling-user-footer"
      >
        <el-button class="user-item-join-btn calling">呼叫中...</el-button>
        <el-button
          class="user-item-cancel-join-btn"
          @click="handleCancelCallBtnClick"
          >取消</el-button
        >
      </div>
      <el-button
        v-else
        @click="handleCallBtnClick(value)"
        class="user-item-join-btn"
        >呼叫</el-button
      >
    </div>
    <div class="topIcon" @click="logout">
      <img src="../../assets/images/home/tuichu.png" />
    </div>
    <!-- <div v-if='radio=="1"'>
        <audio-call></audio-call>
    </div>
     <div v-if='radio=="2"'>
        <video-call></video-call>
    </div> -->
  </div>

  <!-- <ul class="infinite-list"  style="overflow:auto">
    <li v-for="(item,index) in data" :key="index" @click="changphone(item)" class="infinite-list-item">{{ item }}</li>
  </ul> -->
</template>

<script>
import { mapState } from "vuex";
import { getSearchHistory } from "../../utils";
// import AudioCall from "../audio-call";
// import VideoCall from "../video-call";
import config from "../../config";
export default {
  name: "SearchUser",
  components: {
    // AudioCall,
    // VideoCall
  },
  data() {
    return {
      searchInput: "",
      radio: "1",
      callUserId: "",
      searchResultList: [],
      searchHistoryUser: getSearchHistory(),
      data: ["17812782521", "13718642521", "15737973871","20200206"],
      value: "",
    };
  },
  computed: {
    ...mapState({
      loginUserInfo: (state) => state.loginUserInfo,
      meetingUserIdList: (state) => state.meetingUserIdList,
      callStatus: (state) => state.callStatus,
      isAccepted: (state) => state.isAccepted,
      isInviter: (state) => state.isInviter,
    }),
    userList: function () {
      if (this.searchInput === "" && this.searchHistoryUser.length !== 0) {
        return this.searchHistoryUser;
      }
      return this.searchResultList;
    },
  },
  watch: {
    callStatus: function (newStatus, oldStatus) {
      if (newStatus !== oldStatus && newStatus === "connected") {
        this.searchInput = "";
        this.searchResultList = [];
      }
      if (newStatus === "idle") {
        this.callUserId = "";
        //this.$router.push("/");
      }
      if (newStatus === "connected") {
        if (this.radio == "1") {
          this.$router.push("/audio-call");
        } else {
          this.$router.push("/video-call");
        }
      }
    },
  },
  methods: {
    logout() {
      //退出到首页
      this.$router.push("/");
    },
    handleCallBtnClick: function (param) {
      if (param === this.loginUserInfo.userId) {
        this.$message("请输入正确号码");
        return;
      }
      this.callUserId = param;
      if (this.radio == "1") {
        this.CallAudio(param);
      } else {
        this.CallVideo(param);
      }
      //this.$emit("callUser", { param });
    },
    //语音电话
    CallAudio(param) {
      this.$trtcCalling.call({
        userID: param,
        type: this.TrtcCalling.CALL_TYPE.AUDIO_CALL,
        timeout: config.CallTimeout,
      });
      this.$store.commit("userJoinMeeting", this.loginUserInfo.userId);
      this.$store.commit("updateCallStatus", "calling");
      this.$store.commit("updateIsInviter", true);
      this.$router.push("/audio-call");
    },
    //视频电话
    CallVideo(param) {
      this.$trtcCalling.call({
        userID: param,
        type: this.TrtcCalling.CALL_TYPE.VIDEO_CALL,
        timeout: config.CallTimeout,
      });
      this.$store.commit("userJoinMeeting", this.loginUserInfo.userId);
      this.$store.commit("updateCallStatus", "calling");
      this.$store.commit("updateIsInviter", true);
      this.$router.push("/video-call");
    },
    handleCancelCallBtnClick: function () {
      // 对方刚接受邀请，但进房未成功
      if (this.isAccepted && this.callStatus !== "connected") {
        return;
      }
      this.callUserId = "";
      this.$trtcCalling.hangup();
      this.$store.commit("dissolveMeeting");
      this.$store.commit("updateCallStatus", "idle");
      //this.$emit("cancelCallUser");
    },
  },
};
</script>

<style scoped>
.search-user-container {
  width: 400px;
  margin: 10px auto 0;
  padding: 1px;
}
.search-section {
  display: flex;
  flex-direction: row;
}
.search-user-btn {
  margin-left: 10px;
}
.search-user-list {
  padding-top: 20px;
}
.search-user-list-title {
  margin-top: 20px;
  font-size: 18px;
  text-align: left;
}
.user-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.video-call-section-header {
  font-size: 24px;
}
.user-item-info {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.user-item-avatar-wrapper img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.user-item-username {
  margin-left: 20px;
}
.topIcon {
  position: absolute;
  top: 4rem;
  right:0rem;
}
.topIcon img {
  width: 2rem;
  height: 2rem;
  margin-right: 9.5rem;
}
@media screen and (max-width: 767px) {
  .search-user-container {
    width: 90%;
  }
}
</style>
